<template>
  <div class="account-page">
    <el-container>
      <el-header>
        <div class="account-head">
          <el-row :gutter="20" align="middle">
<!--            <el-col :span="2" class="textCol">-->
<!--              <span>账号：</span>-->
<!--            </el-col>-->
<!--            <el-col :span="4">-->
<!--              <el-input-->
<!--                  placeholder="请输入内容"-->
<!--                  v-model="accountInput"-->
<!--                  clearable>-->
<!--              </el-input>-->
<!--            </el-col>-->
<!--            <el-col :span="2" class="textCol">-->
<!--              <span>邮箱：</span>-->
<!--            </el-col>-->
<!--            <el-col :span="4">-->
<!--              <el-input-->
<!--                  placeholder="请输入内容"-->
<!--                  v-model="emailInput"-->
<!--                  clearable>-->
<!--              </el-input>-->
<!--            </el-col>-->
<!--            <el-col :span="2" class="textCol">-->
<!--              <span>手机号码：</span>-->
<!--            </el-col>-->
<!--            <el-col :span="4">-->
<!--              <el-input-->
<!--                  placeholder="请输入内容"-->
<!--                  v-model="phoneInput"-->
<!--                  clearable>-->
<!--              </el-input>-->
<!--            </el-col>-->
            <el-col :span="6">
              <div class="searchInput">
<!--                <el-button @click="resetSearch">重置</el-button>-->
<!--                <el-button type="primary" @click="searchAccount">查询</el-button>-->
                <el-button type="success" @click="addAccount"><el-icon><plus /></el-icon>新增</el-button>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-header>
      <el-main>
        <div class="addAccount">
          <el-dialog title="用户信息" v-model="accountDialogVisible" :before-close="cancelAccountConfig">
            <account-form v-if="accountDialogVisible" :account-detail="rowData" :option="option" @complete="accountFormComplete"></account-form>
          </el-dialog>
        </div>
        <div class="accountTable">
          <el-table :data="accountTableData" style="width: 100%" size="large">
            <el-table-column prop="account" label="账号" align="center" header-align="center"/>
<!--            <el-table-column prop="password" label="密码" align="center" header-align="center"/>-->
            <el-table-column prop="roleId" label="系统角色" align="center" header-align="center">
              <template #default="scope">
                <p v-if="scope.row.role_id == 1">子账户</p>
                <p v-if="scope.row.role_id == 2">主账户</p>
              </template>
            </el-table-column>
            <el-table-column prop="email" label="邮箱" align="center" header-align="center"/>
            <el-table-column prop="phone" label="电话" align="center" header-align="center"/>
            <el-table-column prop="capturePermission" label="抓拍权限" align="center" header-align="center">
              <template #default="scope">
                <p v-if="scope.row.is_photo"><el-icon color="#67C23A"><circle-check-filled /></el-icon></p>
                <p v-if="!scope.row.is_photo"><el-icon color="#F56C6C"><circle-close-filled /></el-icon></p>
              </template>
            </el-table-column>
            <el-table-column prop="configPermission" label="配置权限" align="center" header-align="center">
              <template #default="scope">
                <p v-if="scope.row.is_configue"><el-icon color="#67C23A"><circle-check-filled /></el-icon></p>
                <p v-if="!scope.row.is_configue"><el-icon color="#F56C6C"><circle-close-filled /></el-icon></p>
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="240"  align="center" header-align="center">
              <template #default="scope">
                <el-button size="small" type="primary" @click="editClick(scope.$index, scope.row)">编辑</el-button>
<!--                <el-button size="small" type="danger" @click="deleteClick(scope.$index, scope.row)">删除</el-button>-->
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import accountForm from "@/pages/accounts/accountForm";
import {getAccountList} from "@/utils/userUtils";
import {showMessage} from "@/utils/displayUtils";
import {mapGetters} from "vuex";
export default {
  name: "index",
  components: {
    accountForm
  },
  computed: {
    ...mapGetters(['loginStatus','username','password','email','roleId','uid'])
  },
  data() {
    return {
      accountInput: '',
      emailInput: '',
      phoneInput: '',
      accountTableData: [
        {
          uid:localStorage['uid'],
          pid: 1,
          username:'smart_home',
          password:'456789123',
          role_id: '3', // 子账户为1，主账户为2
          email:'123456789@qq.com',
          phone:'14785296312',
          is_photo: true,
          is_configue: true,
        },
        {
          uid:localStorage['uid'],
          pid: 2,
          username:'plat_manager',
          password:'8456156426',
          roleId: '2',
          email:'161263@163.com',
          phone:'159987455643',
          isPhoto: true,
          isConfigue: true,
        },
        {
          uid:localStorage['uid'],
          pid: 3,
          username:'smart_user',
          password:'6545641564',
          roleId: '1',
          email:'46545656@126.com',
          phone:'4565156156',
          isPhoto: true,
          isConfigue: true,
        },
      ],
      accountDialogVisible: false,
      rowData: {},
      option: 'add'
    }
  },
  mounted() {
    this.searchAccount()
  },
  methods: {
    resetSearch: function (){
      this.accountInput = ''
      this.emailInput = ''
      this.phoneInput = ''
    },
    // todo 调用查询api
    searchAccount: function (){
      console.log('调用查询api')
      let uid = localStorage['uid']
      getAccountList(uid).then((data) => {
        if (data.code == '200') {
          console.log(data)
          showMessage(this,data.msg, 'success')
          this.accountTableData = data.account_data
        }
        else {
          showMessage(this,data.msg,'warning')
        }
      }).catch((error) => {
        console.log(error)
      })
    },
    // todo 调用增加用户api
    addAccount: function (){
      this.option = 'add'
      this.accountDialogVisible = true
    },
    editClick: function (index,row){
      this.option = 'edit'
      this.accountDialogVisible = true
      let ruleForm = {
        uid: this.uid,
        pid: row.pid,
        username:row.username,
        password:row.password,
        checkPass: '',
        role_id: row.role_id,
        email:row.email,
        phone:row.phone,
        is_photo: row.is_photo,
        is_configue: row.is_configue
      }
      this.rowData = ruleForm
    },
    deleteClick: function (){

    },
    cancelAccountConfig: function (){
      this.$confirm('取消配置？')
          .then(_ => {
            this.accountDialogVisible = false
          })
          .catch(_ => {});
    },
    // todo 这里应该调用后台api更新，方便展示效果就用本地数据更新
    accountFormComplete: function (data){
      this.accountDialogVisible = false
      if (data.class == 'add') {
        this.accountTableData.push(data.item)
      } else {
        for (let i = 0; i < this.accountTableData.length; i++){
          if (this.accountTableData[i].account == data.item.account){
            this.accountTableData[i] = data.item
          }
        }
      }
    }
  }
}
</script>

<style scoped>
.account-page{
  background:url("../../assets/background/homepage.jpg");
  width: 100%;
  height: 100%;
  position: fixed;
  margin-top: 0px;/*上边距*/
  margin-left: -30px;/*左边距*/
  margin-right: 30px;
  background-size:100% 100%;
}

.account-head{
  margin-top: 30px;
}

.textCol{
  text-align: right;
}
</style>
